<!DOCTYPE html>


<html lang="en">
  

    <head>
      <meta charset="utf-8" />
        
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title> 麦田麦穗</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/favicon.ico" />
       
<link rel="stylesheet" href="/dist/main.css">

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css"
      />
      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    </head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      


<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>


<!-- Subtitle -->

  <script>
    try {
      var typed = new Typed("#subtitle", {
        strings: ['积累、总结，不断学习', '愿你一生努力，一生被爱', '想要的都拥有，得不到的都释怀'],
        startDelay: 0,
        typeSpeed: 200,
        loop: true,
        backSpeed: 100,
        showCursor: true
      });
    } catch (err) {
      console.log(err)
    }
  </script>
  
<div id="main">
  <section class="outer">
  
  
  <article class="articles">
    
    
    
    
    <article
  id="post-php/学习编写php拓展"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/07/07/php/%E5%AD%A6%E4%B9%A0%E7%BC%96%E5%86%99php%E6%8B%93%E5%B1%95/"
    >学习编写php拓展</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/07/07/php/%E5%AD%A6%E4%B9%A0%E7%BC%96%E5%86%99php%E6%8B%93%E5%B1%95/" class="article-date">
  <time datetime="2021-07-07T07:10:27.000Z" itemprop="datePublished">2021-07-07</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="目的"><a href="#目的" class="headerlink" title="目的"></a>目的</h2><p><strong>为什么要学习编写php拓展？</strong></p>
<p>1.目前市面上有数据库或中间件无php驱动<br>2.有自己的公共组件或函数,虽然可以使用composer，为了提升性能替代composer包<br>3.为了学习php内核原理或其他拓展的内部实现原理</p>
<h2 id="hello-world"><a href="#hello-world" class="headerlink" title="hello,world"></a>hello,world</h2><p><strong>1.源码下载</strong></p>
<pre class="language-shell" data-language="shell"><code class="language-shell"><span class="token function">wget</span> https://www.php.net/distributions/php-7.2.19.tar.bz2
<span class="token function">tar</span> -xvf php-7.2.19.tar.bz2</code></pre>


<p><strong>2.增加函数声明</strong></p>
<pre class="language-shell" data-language="shell"><code class="language-shell"><span class="token function">vim</span> php_vison.h
<span class="token comment"># 在其中增加 PHP_FUNCTION(vison_print);</span>
<span class="token function">vim</span> vison.c

<span class="token comment"># 将如下代码中的PHP_FE和PHP_FE_END中加入下面代码（这的代码是将函数指针注册到Zend引擎）</span>
PHP_FE<span class="token punctuation">(</span>vison_print,  NULL<span class="token punctuation">)</span>
</code></pre>


<p><strong>3.函数定义</strong></p>
<pre class="language-shell" data-language="shell"><code class="language-shell"><span class="token function">vim</span> vison.c
在最后加上创建执行方法vison_print</code></pre>

<pre class="language-c" data-language="c"><code class="language-c"><span class="token function">PHP_FUNCTION</span><span class="token punctuation">(</span>vison_print<span class="token punctuation">)</span>
<span class="token punctuation">&#123;</span>
  <span class="token function">php_printf</span><span class="token punctuation">(</span><span class="token string">"Hello vison!\n"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  RETURN_TRUE<span class="token punctuation">;</span>

<span class="token punctuation">&#125;</span></code></pre>


<p><strong>4.编译</strong></p>
<pre class="language-none"><code class="language-none">phpize

.&#x2F;configure &amp;&amp; make &amp;&amp; make install

# 然后将生成的vison.so放入配置

vim &#x2F;etc&#x2F;php.ini

extension&#x3D;vison.so

#然后输入php -m查看配置
</code></pre>


<p><strong>4.验证</strong></p>
<pre class="language-shell" data-language="shell"><code class="language-shell">php -r <span class="token string">"vison_print();"</span></code></pre>


 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/" rel="tag">php</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-RabbitMQ介绍和场景使用"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/06/25/RabbitMQ%E4%BB%8B%E7%BB%8D%E5%92%8C%E5%9C%BA%E6%99%AF%E4%BD%BF%E7%94%A8/"
    >RabbitMQ介绍和场景使用</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/06/25/RabbitMQ%E4%BB%8B%E7%BB%8D%E5%92%8C%E5%9C%BA%E6%99%AF%E4%BD%BF%E7%94%A8/" class="article-date">
  <time datetime="2021-06-25T01:28:32.000Z" itemprop="datePublished">2021-06-25</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><pre class="language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">version</span><span class="token punctuation">:</span> <span class="token string">'3.1'</span>
<span class="token key atrule">services</span><span class="token punctuation">:</span>
    <span class="token key atrule">rabbitmq-manger</span><span class="token punctuation">:</span>
        <span class="token key atrule">image</span><span class="token punctuation">:</span> rabbitmq<span class="token punctuation">:</span>3<span class="token punctuation">-</span>management
        <span class="token key atrule">restart</span><span class="token punctuation">:</span> always
        <span class="token key atrule">ports</span><span class="token punctuation">:</span>
          <span class="token punctuation">-</span> 5672<span class="token punctuation">:</span><span class="token number">5672</span>
          <span class="token punctuation">-</span> 8091<span class="token punctuation">:</span><span class="token number">15672</span></code></pre>

<p>使用docker进行快速安装</p>
<h2 id="历史"><a href="#历史" class="headerlink" title="历史"></a>历史</h2><ul>
<li>2007年8月，Rabbit公司发行了 RabbitMQ 1.1.0.</li>
<li>2009年8月，VMware出资4.2亿美元收购了SpringSource[9]，并在一段时间内作为VMware的一个独立的部门；公司原有的商业产品以vFabric应用套件名义发售。之后SpringSource又接连收购了RabbitMQ[10]、Redis[11]和Gemstone[12]。除Redis外，它们的产品也成为了vFabric应用套件的一部分。</li>
</ul>
<p>你会发现一个有趣而诧异的事实，VMware 和 Spring 、RabbitMQ、Redis这些大名鼎鼎的技术是同属一家公司。而 著名的 Spring背后的SpringSource公司主要以培训和咨询盈利。</p> 
      <a class="article-more-link" href="/2021/06/25/RabbitMQ%E4%BB%8B%E7%BB%8D%E5%92%8C%E5%9C%BA%E6%99%AF%E4%BD%BF%E7%94%A8/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-mysql的waitimeout"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/06/02/mysql%E7%9A%84waitimeout/"
    >mysql的waitimeout</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/06/02/mysql%E7%9A%84waitimeout/" class="article-date">
  <time datetime="2021-06-02T12:33:18.000Z" itemprop="datePublished">2021-06-02</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <p>首先，我们来看下</p>
<pre class="language-shell" data-language="shell"><code class="language-shell">show GLOBAL VARIABLES like <span class="token string">'%timeout%'</span><span class="token punctuation">;</span></code></pre>
<p>默认值为28800s即8小时,我们改为100s</p>
<pre class="language-ini" data-language="ini"><code class="language-ini"><span class="token comment"># Default Homebrew MySQL server config</span>
<span class="token header"><span class="token punctuation">[</span><span class="token section-name selector">mysqld</span><span class="token punctuation">]</span></span>
<span class="token comment"># Only allow connections from localhost</span>
<span class="token key attr-name">bind-address</span> <span class="token punctuation">=</span> <span class="token value attr-value">0.0.0.0</span>
<span class="token key attr-name">wait_timeout</span><span class="token punctuation">=</span><span class="token value attr-value">100</span>
<span class="token key attr-name">interactive_timeout</span><span class="token punctuation">=</span><span class="token value attr-value">100</span></code></pre>
<p>重新查看结果</p>
<p><img src="https://vison-blog.oss-cn-beijing.aliyuncs.com/20210603144255.png" alt=""></p> 
      <a class="article-more-link" href="/2021/06/02/mysql%E7%9A%84waitimeout/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mysql/" rel="tag">mysql</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-vue-quasar-electron-springboot-mysql撸一个TODO-LIST-看板"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/04/09/vue-quasar-electron-springboot-mysql%E6%92%B8%E4%B8%80%E4%B8%AATODO-LIST-%E7%9C%8B%E6%9D%BF/"
    >vue+quasar+electron+springboot+mysql撸一个TODO LIST 看板</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/04/09/vue-quasar-electron-springboot-mysql%E6%92%B8%E4%B8%80%E4%B8%AATODO-LIST-%E7%9C%8B%E6%9D%BF/" class="article-date">
  <time datetime="2021-04-09T03:39:08.000Z" itemprop="datePublished">2021-04-09</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <p>先看效果</p>
<p><img src="https://vison-blog.oss-cn-beijing.aliyuncs.com/20210330200044.png" alt=""></p>
<p>写本项目的目的有几点：</p>
<ol>
<li>学习下vue+electron桌面开发</li>
<li>学习下java和spring开发(本人一直使用PHP)</li>
<li>一直缺少一款能适合自己的TODO LIST软件，能有桌面端的</li>
</ol> 
      <a class="article-more-link" href="/2021/04/09/vue-quasar-electron-springboot-mysql%E6%92%B8%E4%B8%80%E4%B8%AATODO-LIST-%E7%9C%8B%E6%9D%BF/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/" rel="tag">web</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-编发编程日记-线程不安全的危害"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/03/03/%E7%BC%96%E5%8F%91%E7%BC%96%E7%A8%8B%E6%97%A5%E8%AE%B0-%E7%BA%BF%E7%A8%8B%E4%B8%8D%E5%AE%89%E5%85%A8%E7%9A%84%E5%8D%B1%E5%AE%B3/"
    >并发编程日记-线程不安全的危害</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/03/03/%E7%BC%96%E5%8F%91%E7%BC%96%E7%A8%8B%E6%97%A5%E8%AE%B0-%E7%BA%BF%E7%A8%8B%E4%B8%8D%E5%AE%89%E5%85%A8%E7%9A%84%E5%8D%B1%E5%AE%B3/" class="article-date">
  <time datetime="2021-03-03T11:16:37.000Z" itemprop="datePublished">2021-03-03</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <p><img src="https://vison-blog.oss-cn-beijing.aliyuncs.com/20210303192545.png" alt=""></p> 
      <a class="article-more-link" href="/2021/03/03/%E7%BC%96%E5%8F%91%E7%BC%96%E7%A8%8B%E6%97%A5%E8%AE%B0-%E7%BA%BF%E7%A8%8B%E4%B8%8D%E5%AE%89%E5%85%A8%E7%9A%84%E5%8D%B1%E5%AE%B3/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/" rel="tag">java</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-java/spring-boot-vue的前后端分离部署"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/02/22/java/spring-boot-vue%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2/"
    >spring-boot+vue+supervisor+nginx的前后端分离部署</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/02/22/java/spring-boot-vue%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2/" class="article-date">
  <time datetime="2021-02-22T06:43:54.000Z" itemprop="datePublished">2021-02-22</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>要保证同域部署,因为跨域会有很多问题要重新解决</li>
</ul>
<p>顺便树下，但其实现在互联网产品一般都有多客户端，pc web 、小程序、app。保守的同域session模式保持会话已经满足不了一些需求。比如，单端登录等。</p>
<p>言归正传，我采取的思路是，前端请求接口时统一加上api前缀，nginx将api前缀的路由请求代理转发到spring-boot</p> 
      <a class="article-more-link" href="/2021/02/22/java/spring-boot-vue%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%83%A8%E7%BD%B2/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/" rel="tag">java</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-利用Locust进行性能测试"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/01/23/%E5%88%A9%E7%94%A8Locust%E8%BF%9B%E8%A1%8C%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95/"
    >利用Locust进行性能测试</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/01/23/%E5%88%A9%E7%94%A8Locust%E8%BF%9B%E8%A1%8C%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95/" class="article-date">
  <time datetime="2021-01-23T02:17:02.000Z" itemprop="datePublished">2021-01-23</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <ul>
<li>要看一个项目的最大可用能力是多少，性能测试工作少不了.</li>
<li>每一个项目都应该做压测</li>
<li>多线程并发模型一定要做压测</li>
</ul> 
      <a class="article-more-link" href="/2021/01/23/%E5%88%A9%E7%94%A8Locust%E8%BF%9B%E8%A1%8C%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/" rel="tag">软件工程</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-黑启动"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/01/21/%E9%BB%91%E5%90%AF%E5%8A%A8/"
    >黑启动</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/01/21/%E9%BB%91%E5%90%AF%E5%8A%A8/" class="article-date">
  <time datetime="2021-01-21T13:38:28.000Z" itemprop="datePublished">2021-01-21</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="facebook案例"><a href="#facebook案例" class="headerlink" title="facebook案例"></a>facebook案例</h2><p>作为黑启动流程的一部分，每个Facebook 用户会话（在用户端浏览器中运行<br>JavaScript 代码）都加载了测试工具。虽然聊天功能的用户界面元素被隐藏起来，但浏览器<br>还是会向已部署在生产环境中的后台聊天服务器发送用户不可见的聊天测试信息，这使开</p>
<p>发团队能够在整个项目过程中模拟出类生产负载，从而在发布之前找出并解决性能问题。</p>
<p><img src="https://vison-blog.oss-cn-beijing.aliyuncs.com/20210121214126.jpeg" alt=""></p>
<p>老子惊了,这有点牛皮</p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E6%96%B9%E6%A1%88/" rel="tag">方案</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-java/servlet集成mybatis-无xml-注解方式"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/01/06/java/servlet%E9%9B%86%E6%88%90mybatis-%E6%97%A0xml-%E6%B3%A8%E8%A7%A3%E6%96%B9%E5%BC%8F/"
    >servlet | servlet集成mybatis-无xml&amp;注解方式</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2021/01/06/java/servlet%E9%9B%86%E6%88%90mybatis-%E6%97%A0xml-%E6%B3%A8%E8%A7%A3%E6%96%B9%E5%BC%8F/" class="article-date">
  <time datetime="2021-01-06T08:14:24.000Z" itemprop="datePublished">2021-01-06</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>习惯了php项目之后，恐怕非常不喜欢操作xml吧.本章将介绍servlet+mybatis无xml配置模式。</p>
</blockquote> 
      <a class="article-more-link" href="/2021/01/06/java/servlet%E9%9B%86%E6%88%90mybatis-%E6%97%A0xml-%E6%B3%A8%E8%A7%A3%E6%96%B9%E5%BC%8F/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/" rel="tag">java</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-java/Introduction-to-Spring-MVC-HandlerInterceptor拦截器介绍"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/09/24/java/Introduction-to-Spring-MVC-HandlerInterceptor%E6%8B%A6%E6%88%AA%E5%99%A8%E4%BB%8B%E7%BB%8D/"
    >Introduction to Spring MVC HandlerInterceptor拦截器介绍</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/09/24/java/Introduction-to-Spring-MVC-HandlerInterceptor%E6%8B%A6%E6%88%AA%E5%99%A8%E4%BB%8B%E7%BB%8D/" class="article-date">
  <time datetime="2020-09-24T06:41:22.000Z" itemprop="datePublished">2020-09-24</time>
</a>    
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
   
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JAVA/" rel="tag">JAVA</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/2/">上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/4/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2015-2022
        <i class="ri-heart-fill heart_icon"></i> vison
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="麦田麦穗"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E6%97%85%E8%A1%8C/">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" target="_blank" rel="noopener" href="http://shenyu-vip.lofter.com">摄影</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">友链</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/about">关于我</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/null">Gallery</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>Buy me a cup of coffee~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpeg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wallet.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->
 
<link rel="stylesheet" href="/css/clipboard.css">
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>
 
<!-- CanvasBackground -->

<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
</body>

</html>